<template>
    <div class="myListWrap" 
        :style="[props.height && `height:${props.height}`, 
                props.width && `width:${props.width}`]">
        <ul>
            <li v-for="(listItem,index) in props.listData" :key="index">
                <div 
                style="padding: 10px 5px;"
                :class="currentIndex === index ? 'currentItem' : `` " 
                @click="toggle(listItem,index)">
               <span>{{ index+1}}.</span> {{ listItem.label }}
            </div>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { MeetConfigType, WriteConfigType } from '@/api/type';
import {ref} from 'vue'
const props = defineProps(['listData','width','height'])
const emits = defineEmits(['listToggle'])
const currentIndex = ref(0)

const toggle = (param:MeetConfigType|WriteConfigType,index:number)=>{
    currentIndex.value = index
    emits('listToggle',param)
}
</script>

<style scoped lang="scss">
.myListWrap {
    width: 200px;
    height: 600px;
    // background-color: #40485b;
    overflow-y: auto;
    li{
        cursor: pointer;
        &:hover{
            background-color: rgb(14 75 224 / 22%);
        }
    }
}
.currentItem{
    height: 100%;
    background-color: rgb(14 75 224 / 22%);
}
</style>
